<script setup lang="ts">
import { computed } from 'vue';
import { App } from 'ant-design-vue';
import { usePlayerProgress, useSpiritualRoot } from '../../composables';
import { isEqual } from 'lodash-es';
import { EVENTS, GameKernel } from '../../game';
import {
  FIVE_ELEMENT_MAP,
  type FiveElement,
} from '../../game/constants/five-elements';
import StarBackgroundContainer from './components/star-background-container/index.vue';

const { message } = App.useApp();

const { state: playerProgressState } = usePlayerProgress();
const { state: spiritualRootState } = useSpiritualRoot();

const submitDisabled = computed(() => {
  return isEqual(
    spiritualRootState.value.tempConfig,
    spiritualRootState.value.config
  );
});

const show = computed(() => {
  return (
    !playerProgressState.value.initedSpiritualRoot &&
    spiritualRootState.value.skillPoints > 0
  );
});

function onAddSpiritualRoot(key: FiveElement) {
  GameKernel.inst.bus.emit(EVENTS.SPIRITUAL_ROOT_ADD, key);
}

function onSubSpiritualRoot(key: FiveElement) {
  GameKernel.inst.bus.emit(EVENTS.SPIRITUAL_ROOT_SUB, key);
}

function onSubmitClick() {
  if (spiritualRootState.value.tempSkillPoints > 0) {
    message.info('未分配完点数');
    return;
  }
  GameKernel.inst.bus.emit(EVENTS.SPIRITUAL_ROOT_SUBMIT);
  GameKernel.inst.bus.emit(
    EVENTS.PLAYER_PROGRESS_SET_INIT_SPIRITUAL_ROOT,
    true
  );
}
</script>

<template>
  <div
    v-if="show"
    class="absolute top-0 left-0 w-screen h-screen z-10 bg-container-background text-primary-text"
  >
    <star-background-container :is-absolute="false">
      <div class="h-full w-full flex items-center justify-center">
        <div class="flex flex-col">
          <div class="pb-4">
            可分配点数: {{ spiritualRootState.tempSkillPoints }}
          </div>
          <div class="flex flex-col gap-2">
            <div
              v-for="(item, key) in spiritualRootState.tempConfig"
              :key="key"
              class="flex items-center gap-2"
            >
              <div>{{ FIVE_ELEMENT_MAP[key].label }}:</div>
              <div class="w-8">{{ item }}</div>
              <div class="flex gap-2">
                <a-button
                  :disabled="
                    spiritualRootState.tempConfig[key] <=
                    spiritualRootState.config[key]
                  "
                  @click="onSubSpiritualRoot(key)"
                >
                  减
                </a-button>
                <a-button
                  :disabled="spiritualRootState.tempSkillPoints === 0"
                  @click="onAddSpiritualRoot(key)"
                >
                  加
                </a-button>
              </div>
            </div>
          </div>
          <div class="pt-4">
            <a-button
              type="primary"
              :block="true"
              :disabled="submitDisabled"
              @click="onSubmitClick"
            >
              确认加点
            </a-button>
          </div>
        </div>
      </div>
    </star-background-container>
  </div>
</template>
